<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="freight-box">
      <el-card shadow="never">
        <template #header>
          <el-button
            type="warning"
            style="padding: 10px 20px"
            class="add-btn"
            @click="freightBtn('add')"
          >新增模板</el-button>
        </template>
        <!-- 运费列表 -->
        <el-table
          v-loading="loading"
          element-loading-text="加载中"
          :data="list"
          stripe
        >
          <el-table-column
            label="模板类型"
            width="193px"
          >
            <template v-slot="{ row }">
              <span>{{
                row.templateType === 1
                  ? '同城寄'
                  : row.templateType === 2
                    ? '省内寄'
                    : row.templateType === 3
                      ? '经济区互寄'
                      : '跨省'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="运送类型"
            width="193px"
          >
            <template v-slot="{ row }">
              <span>{{ row.transportType === 1 ? '普快' : '特快' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="关联城市"
            width="193px"
          >
            <template v-slot="{ row }">
              <span>{{ listText(row.associatedCityList) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="firstWeight"
            label="首重"
            width="219px"
          ></el-table-column>
          <el-table-column
            prop="continuousWeight"
            label="续重"
            width="219px"
          ></el-table-column>
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
            width="219px"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template v-slot="{ row }">
              <el-button
                type="text"
                class="list-btn"
                @click="freightBtn('edit', row)"
              >编辑</el-button>
              <span class="line">|</span>
              <el-button
                type="text"
                class="list-btn red"
                @click="del(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <freightAdd
          ref="editForm"
          :show-dialog.sync="showDialog"
          :dialog-title="title"
          @getList="freightManageList"
        ></freightAdd>
      </el-card>
    </div>
  </div>
</template>

<script>
import freightAdd from '@/views/transit/components/freight-add.vue'
import { freightManageList, freightManageDelete } from '@/api/transit'
export default {
  components: {
    freightAdd
  },
  data() {
    return {
      list: [], // 数据列表
      showDialog: false, // 弹层
      title: '', // 弹层标题
      editId: '', // 当前行id
      ctext: ['全国', '京津翼', '江浙沪', '川渝', '黑吉辽'], // 关联城市
      loading: false
    }
  },
  created() {
    this.freightManageList()
  },
  methods: {
    // 运费管理列表
    async freightManageList() {
      this.loading = true
      const { data } = await freightManageList()
      this.list = data
      this.loading = false
    },
    // 切换显示
    freightBtn(type, row) {
      if (type === 'add') {
        this.title = '新增模板'
      } else {
        this.title = '编辑模板'
        // 创建对象副本
        this.$set(row, 'editDetail', {
          ...row
        })
        // 调用回显函数
        this.$nextTick(() => {
          this.$refs.editForm.showedit(row)
        })
      }
      this.showDialog = true
    },
    // 删除
    del(id) {
      this.$confirm('确定要删除吗？', '删除确认')
        .then(async (res) => {
          await freightManageDelete(id)
          this.$message.success('删除成功！')
          this.freightManageList()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 动态判断关联城市渲染
    listText(list) {
      if (list.length === 0) {
        return ''
      }
      // 转换文本
      return list.map((item) => this.ctext[Number(item) - 1]).join(',')
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
  .freight-box {
    padding: 20px;
    .el-card {
      padding: 28px;
    }
    ::v-deep .el-card__header {
      padding: 0;
      border: none;
    }
    ::v-deep .el-card__body {
      padding: 0;
      margin-bottom: 30px;
    }
    .add-btn {
      margin-bottom: 20px;
    }
    .list-btn {
      font-size: 13px;
      padding: 0;
      line-height: 23px;
    }
    .line {
      margin: 0 6px;
      color: #dcdfe6;
    }
    .red {
      color: #f56c6c;
    }
  }
}
</style>
